<template>
  <div :class="$style.container">
    <el-carousel 
      :interval="interval"
      :autoplay="autoplay" 
      :arrow="always"
      class="a_swiper"
      height="450px">
      <el-carousel-item 
        v-for="item in hots" 
        :key="item.id">
        <nuxt-link :to="{path:'/detail',query:{id: item.id}}">
          <img 
            v-lazy="item.img" 
            :alt="item.name">
        </nuxt-link>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  props: {
    hots: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      autoplay: true,
      interval: 5000,
      always: 'hover'
    }
  }
}
</script>

<style lang='scss' module>
.container {
  position: relative;
  img {
    width: 100%;
    object-fit: contain;
  }
  .search {
    position: absolute;
    top: 50px;
  }
}
</style>

<style scoped>
.a_swiper >>> .el-carousel__button {
  height: 10px;
  border-radius: 5px;
}
.a_swiper >>> .is-active button {
  background: #e36049;
}
.a_swiper >>> .el-carousel__arrow {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  opacity: 0.6;
  background: black;
}
.a_swiper >>> .el-icon-arrow-left,
.a_swiper >>> .el-icon-arrow-right {
  font-size: 26px;
}
</style>
